<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div class="class">
        <input type="text">
        <button>添加</button>
        <button></button>
    </div>
    <ul>
        
    </ul>
</body>
<script>
       var text=document.querySelector('input')
        var btn=document.querySelector('button')
        var ul=document.querySelector('ul')
        btn.addEventListener('click',function(){
              var input=text.value
              //推荐方式
              //1.创建元素节点
              var li=document.createElement('li')
              //2. 设置节点属性
              li.innerHTML=input
              //继续添加子元素
              var btn=document.createElement('button')
              btn.innerHTML='删除'
              btn.addEventListener('click',function(){
                  //用于查找子元素的父元素 parentnode
                  ul.removeChild(this.parentElement)
              })
              li.appendChild(btn)

              li.addEventListener('click',function(){
                  //li添加监听事件 removechild从父元素中删除子元素
                  ul.removeChild(this)
              })
              //3.父元素添加到子元素
              ul.appendChild(li)
              
            //   //不推荐 不方便添加监听事件
            //   var li="<li>"+input+"</li>"
            //   ul.innerHTML+=li   


        }
            )
</script>
</html>